<nz-breadcrumb style="margin:12px 0;">
    <nz-breadcrumb-item>系统设置</nz-breadcrumb-item>
    <nz-breadcrumb-item>学生管理</nz-breadcrumb-item>
</nz-breadcrumb>
<div style="padding:24px; background: #fff; min-height: 100%;" class="animation-right">
    <button nz-button [nzType]="'primary'" [nzShape]="'circle'" (click)="showModal()">
        <i class="anticon anticon-plus"></i>
    </button>
    <nz-modal [nzVisible]="isVisible" [nzTitle]="modalTitle" [nzContent]="modalContent" [nzFooter]="modalFooter" (nzOnCancel)="handleCancel($event)">
        <ng-template #modalTitle>
            <i class="anticon anticon-edit"></i> {{ isViewStateUpdate ? '更新学生' : '新增学生' }}
        </ng-template>
        <ng-template #modalContent>
            <form nz-form [formGroup]="studentForm" (ngSubmit)="handleOk($event, classForm.value)" [nzType]="'horizontal'">
                <div nz-form-item nz-row>
                    <div nz-form-label nz-col [nzSpan]="6">
                        <label nz-form-item-required>学生姓名</label>
                    </div>
                    <div nz-form-control nz-col [nzSpan]="16" [nzValidateStatus]="getFormControl('name')" [nzHasFeedback]="true">
                        <nz-input formControlName="name" [nzPlaceHolder]="'学生姓名'" [nzSize]="'large'"></nz-input>
                        <div nz-form-explain *ngIf="getFormControl('name').dirty && getFormControl('name').hasError('required')">请输入学生姓名</div>
                        <div nz-form-explain *ngIf="getFormControl('name').dirty && getFormControl('name').hasError('maxlength')">学生姓名不能超过10个字符</div>
                    </div>
                </div>
                <div nz-form-item nz-row>
                    <div nz-form-label nz-col [nzSpan]="6">
                        <label nz-form-item-required>学号</label>
                    </div>
                    <div nz-form-control nz-col [nzSpan]="16" [nzValidateStatus]="getFormControl('studentId')" [nzHasFeedback]="true">
                        <nz-input formControlName="studentId" [nzPlaceHolder]="'学号'" [nzSize]="'large'"></nz-input>
                        <div nz-form-explain *ngIf="getFormControl('studentId').dirty && getFormControl('studentId').hasError('required')">请输入学生学号</div>
                        <div nz-form-explain *ngIf="getFormControl('studentId').dirty && getFormControl('studentId').hasError('maxlength')">学号不能超过20个字符</div>
                    </div>
                </div>
                <div nz-form-item nz-row>
                    <div nz-form-label nz-col [nzSpan]="6">
                        <label nz-form-item-required>所属年级/班级</label>
                    </div>
                    <div nz-form-control nz-col [nzSpan]="16">
                        <nz-cascader
                            [class.class123]="true"
                            formControlName="gradeIdAndClassId"
                            [nzOptions]="gradeIdAndClassIdList"
                            [nzValueProperty]="'value'"
                            [nzLabelProperty]="'label'"
                            [nzPlaceHolder]="'请选择年级/班级'">
                        </nz-cascader>
                    </div>
                </div>
                <div nz-form-item nz-row>
                    <div nz-form-label nz-col [nzSpan]="6">
                        <label nz-form-item-required>家长姓名</label>
                    </div>
                    <div nz-form-control nz-col [nzSpan]="16" [nzValidateStatus]="getFormControl('parentName')" [nzHasFeedback]="true">
                        <nz-input formControlName="parentName" [nzPlaceHolder]="'家长姓名'" [nzSize]="'large'"></nz-input>
                        <div nz-form-explain *ngIf="getFormControl('parentName').dirty && getFormControl('parentName').hasError('required')">请输入家长姓名</div>
                        <div nz-form-explain *ngIf="getFormControl('parentName').dirty && getFormControl('parentName').hasError('maxlength')">家长姓名不能超过10个字符</div>
                    </div>
                </div>
                <div nz-form-item nz-row>
                    <div nz-form-label nz-col [nzSpan]="6">
                        <label nz-form-item-required>家长联系方式</label>
                    </div>
                    <div nz-form-control nz-col [nzSpan]="16" [nzValidateStatus]="getFormControl('parentPhone')" [nzHasFeedback]="true">
                        <nz-input formControlName="parentPhone" [nzPlaceHolder]="'家长联系方式'" [nzSize]="'large'"></nz-input>
                        <div nz-form-explain *ngIf="getFormControl('parentPhone').dirty && getFormControl('parentPhone').hasError('required')">请输入家长联系方式</div>
                    </div>
                </div>
                <div nz-form-item nz-row>
                    <div nz-form-label nz-col [nzSpan]="6">
                        <label nz-form-item-required>身份证号码</label>
                    </div>
                    <div nz-form-control nz-col [nzSpan]="16" [nzValidateStatus]="getFormControl('idCard')" [nzHasFeedback]="true">
                        <nz-input formControlName="idCard" [nzPlaceHolder]="'身份证号码'" [nzSize]="'large'"></nz-input>
                        <div nz-form-explain *ngIf="getFormControl('idCard').dirty && getFormControl('idCard').hasError('required')">请输入学生身份证号码</div>
                        <div nz-form-explain *ngIf="getFormControl('idCard').dirty && getFormControl('idCard').hasError('maxlength')">学号应为18个字符</div>
                    </div>
                </div>
                <div nz-form-item nz-row>
                    <div nz-form-label nz-col [nzSpan]="6">
                        <label nz-form-item-required>出生日期</label>
                    </div>
                    <div nz-form-control nz-col [nzSpan]="16" [nzValidateStatus]="getFormControl('birthday')">
                        <nz-datepicker formControlName="birthday" [nzPlaceHolder]="'请选择出生日期'" [nzDisabledDate]="_disabledDate"></nz-datepicker>
                        <div nz-form-explain *ngIf="getFormControl('birthday').dirty && getFormControl('birthday').hasError('required')">请选择学生出生日期</div>
                    </div>
                </div>
                <div nz-form-item nz-row>
                    <div nz-form-label nz-col [nzSpan]="6">
                        <label nz-form-item-required>性别</label>
                    </div>
                    <div nz-form-control nz-col [nzSpan]="16" [nzValidateStatus]="getFormControl('sex')">
                        <nz-radio-group formControlName="sex">
                            <label nz-radio [nzValue]="'1'">
                              <span>男生</span>
                            </label>
                            <label nz-radio [nzValue]="'2'">
                              <span>女生</span>
                            </label>
                        </nz-radio-group>
                    </div>
                </div>
            </form>
        </ng-template>
        <ng-template #modalFooter>
            <button nz-button [nzType]="'default'" [nzSize]="'large'" (click)="handleCancel($event)">返 回</button>
            <button nz-button [nzType]="'primary'" [nzSize]="'large'" (click)="handleOk($event, studentForm.value)" [nzLoading]="isConfirmLoading"
                [disabled]="!studentForm.valid">{{ isViewStateUpdate ? '更 新' : '提 交' }}</button>
        </ng-template>
    </nz-modal>
    <nz-table #nzTable [nzAjaxData]="studentList" [nzShowSizeChanger]="true" [nzLoading]="_loading" [nzTotal]="_total" [(nzPageIndex)]="_current"
        (nzPageIndexChange)="getAllStudents()" [(nzPageSize)]="_pageSize" (nzPageSizeChange)="getAllStudents()" [nzShowTotal]="true">
        <thead nz-thead>
            <tr>
                <th nz-th></th>
                <th nz-th>
                    <span>学生学号</span>
                </th>
                <th nz-th>
                    <span>学生姓名</span>
                </th>
                <th nz-th>
                    <span>所属年级</span>
                </th>
                <th nz-th>
                    <span>所属班级</span>
                </th>
                <th nz-th>
                    <span>家长姓名</span>
                </th>
                <th nz-th>
                    <span>家长联系方式</span>
                </th>
                <th nz-th>
                    <span>身份证号码</span>
                </th>
                <th nz-th>
                    <span>出生日期</span>
                </th>
                <th nz-th>
                    <span>性别</span>
                </th>
                <th nz-th>
                    <span>创建日期</span>
                </th>
                <th nz-th>
                    <span>操作</span>
                </th>
            </tr>
        </thead>
        <tbody nz-tbody>
            <tr nz-tbody-tr *ngFor="let student of nzTable.data; let i = index;">
                <td nz-td>{{ i + 1 }}</td>
                <td nz-td>{{ student.studentId }}</td>
                <td nz-td>{{ student.name }}</td>
                <td nz-td>{{ student.gradeId.name }}</td>
                <td nz-td>{{ student.classId.name }}</td>
                <td nz-td>{{ student.parentName }}</td>
                <td nz-td>{{ student.parentPhone }}</td>
                <td nz-td>{{ student.idCard }}</td>
                <td nz-td>{{ student.birthday }}</td>
                <td nz-td>{{ student.sex === 1 ? '男' : '女' }}</td>
                <td nz-td>{{ student.createDate | date: 'yyyy-MM-dd HH:mm:ss' }}</td>
                <td nz-td>
                    <button nz-button class="ant-btn" [nzType]="'primary'" (click)="showModal(student._id)">
                        <i class="anticon anticon-edit"></i>
                    </button>
                    <nz-popconfirm [nzTitle]="'确定要删除学生吗？'" (nzOnConfirm)="del(student._id)" [nzPlacement]="'topRight'">
                            <button nz-popconfirm nz-button class="ant-btn" [nzType]="'danger'">
                                <i class="anticon anticon-delete"></i>
                            </button>
                        </nz-popconfirm>
                </td>
            </tr>
        </tbody>
    </nz-table>
</div>